<!DOCTYPE html>
<html>

<head>
  <!-- 设置文档类型为HTML5 -->
  <title>辩论</title>
  <!-- 设置页面标题 -->
  <meta charset="utf-8">
  <!-- 设置字符编码为UTF-8 -->
  <meta name="viewport" content="width=device-width">
  <!-- 设置视口宽度与设备宽度相同，以适应移动设备 -->
  <link rel="stylesheet" type="text/css" href="style.css">
  <!-- 引入外部样式表 -->
</head>

<body>
  <h1 id="step-name" style="width: 100%;text-align: center;font-size: 3em;color: rgb(255, 217, 0);">开篇立论</h1>
  <!-- 页面标题，使用内联样式设置样式 -->
  <div class="container">
    <div class="team-info">
      <h2>正&nbsp&nbsp方</h2>
      <!-- 标识正方队伍信息 -->
      <h3 id="left-viewpoint">正方观点</h3>
      <div class="timer-buttons">
        <p id="left-timer">02:00</p>
        <!-- 显示正方计时器，初始时间设置为02:00 -->
        <div class="buttons-container">
          <button class="flat-button" onclick="startLeftTimer()"> 开始 </button>
          <!-- 开始正方计时器 -->
          <button class="flat-button" onclick="pauseLeftTimer()"> 暂停 </button>
          <!-- 暂停正方计时器 -->
          <button class="flat-button" onclick="resetLeftTimer()"> 重置 </button>
          <!-- 重置正方计时器 -->
        </div>
      </div>
    </div>

    <div class="topic">
      <div class="topic-header-container">
        <h2 id="question">辩论题目</h2>
        <p id="middle-timer">01:00</p>
      </div>
      <!-- 标识辩论题目 -->
      <div class="text-content">
        <p id="topic"></p>
      </div>
      <div class="topic-button">
        <button id="change" onclick="changeDebater()">切换计时</button>
        <button id="previousQuestion">上一题</button>
        <label for="jsonFile">
          <input type="file" id="jsonFile" accept=".json" />
        </label>
        <!-- 上传txt文件 -->
        <button id="nextQuestion">下一题</button>
        <button onclick="changeStep()">下一环节</button>
        <!-- 进入辩论的下一环节 -->
      </div>
    </div>

    <div class="team-info">
      <h2>反&nbsp&nbsp方</h2>
      <!-- 标识反方队伍信息 -->
      <h3 id="right-viewpoint">反方观点</h3>
      <div class="timer-buttons">
        <p id="right-timer">02:00</p>
        <!-- 显示反方计时器，初始时间设置为02:00 -->
        <div class="buttons-container">
          <button class="flat-button" onclick="startRightTimer()"> 开始 </button>
          <!-- 开始反方计时器 -->
          <button class="flat-button" onclick="pauseRightTimer()"> 暂停 </button>
          <!-- 暂停反方计时器 -->
          <button class="flat-button" onclick="resetRightTimer()"> 重置 </button>
          <!-- 重置反方计时器 -->
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="main.js"></script>
  <script type="text/javascript" src="question.js"></script>
  <script>
    var currentURL = window.location.href;
    if (currentURL.indexOf('index.html') !== -1) {
      document.body.style.backgroundImage = "url('01.png')";
    } else if (currentURL.indexOf('main.html') !== -1) {
      document.body.style.backgroundImage = "url('02.png')";
    }  
  </script>
</body>

</html>